<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>声明式渲染</title>
</head>
<body>

    <div id="app">
        {{message}}
    </div>
    <!--
    message 是app-2例子中的属性,修改后，页面会直接进行修改
    vue 能够修改属性
    -->
    <div id="app-2">
        <span v-bind:title="message">
            鼠标停留
        </span>
    </div>
    <!--
    条件与循环
    1. seen 是app-3的例子中的属性，进行修改后，app-3会立即会进行刷新，从而影响了DOM的结构
    -->
    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <!--循环-->
    <div id="app-4">
        <ol>
            <li v-for="too in todos">
                {{too.text}}
            </li>
        </ol>
    </div>
    <!--处理用户输入-->
    <div id="app-5">
        <p class="message">{{message}}</p>
        <button  v-on:click="reverseMessage">逆转消息</button>
    </div>
    <!-- 双向绑定
    p标签的内容是vue中属性message,绑定住
    input标签的v-model的指令是指input的内容改变进而改变vue的message的属性，再从而影响到
    p标签的内容
    -->
    <div id="app-6">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    <!--
        todo-item标签是自己创建的从而注册到Vue中的，此时使用再浏览器中没有保存
    -->
    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item></todo-item>
    </ol>

    <div id="app-7">
        <ol>
            <!--
              现在我们为每个 todo-item 提供 todo 对象
              todo 对象是变量，即其内容可以是动态的。
              我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
            -->
            <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>
<script>
    var app  = new Vue({
        el:'#app',
        data:{
            message:'Hello Vue!'
        }
    })
    var app2 = new Vue({
        el:'#app-2',
        data:{
            message:'页面加载于 ' + new Date().toLocaleDateString()
        }
    })
    var app3 = new Vue({
        el:'#app-3',
        data:{
            seen:1
        }
    })
    var app4 = new Vue({
        el:'#app-4',
        data:{
            todos:[
                {text:"学习JavaScript"},
                {text:"学习Vue"},
                {text:"整个牛项目"}
            ]
        }
    })
    var app5 = new Vue({
        el:'#app-5',
        data:{
            message:'Hello Vue.js!'
        },
        methods:{
            reverseMessage:function () {
                this.message = this.message.split("").reverse().join("");
            }
        }
    })
    var app6 = new Vue({
        el:'#app-6',
        data:{
            message:'Hello Vue',
        }
    })
    /**
     * 注册todo-item标签
     * props:   是属性
     * template:标签的显示形式
     */

    Vue.component('todo-item', {
        props:['todo'],
        template: '<li>{{todo.text}}</li>'
    })
    var app7 = new Vue({
        el:'#app-7',
        // props是属性，在创建完成以后才能调用的
        props:['prop'],
        // data是实例变量,再初始化的时候就能调用
        data:{
            groceryList:[
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其他什么人吃的东西' }
                ]
        },
        beforeCrete:function () {
            console.log("beforeCrete");
        },
        // 创建时候调用
        created:function () {
            console.log("created");
            console.log(this.groceryList);
        },
        mounted:function () {
            console.log("mounted");
        },
        updated:function () {
            console.log("updated");
        },
        destroyed:function(){
            console.log("destroyed");
        }
    })
    app7.$watch('prop',function (newValue) {
        console.log("newValue" + newValue );
    })
    var num = "2000";
    app7.prop = num;
    app7.prop = "0000"

</script>
</body>
</html>